<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<style>
    .form-group{
        margin-bottom: 0;
    }

</style>
<head th:include="include/head">

</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">


    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>分类信息</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">首页</a></li>
                            <li class="breadcrumb-item active">分类信息</li>
                        </ol>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <section class="content">
            <form id="fileupload" th:action="@{/common/upload}" method="post"
                  style="display: none;">
                <input type="hidden"  id="type" />
                <input type="file" name="file" id="file" />
                <input type="file" name="file" id="file1"    />
                <input type="file" name="file" id="file2"    />
            </form>
            <form class="form-horizontal" id="form" method="post"
                  enctype="multipart/form-data" th:action="@{/content/save}">

                <div class="card card-info">

                    <div class="card-header">
                        <h3 class="card-title">基本信息</h3>
                    </div>


                    <input type="hidden" name="contentId" id="contentId" th:value="${bean.contentId}" />
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="titleName" class="col-sm-2 col-form-label">标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="titleName" required="required"
                                       id="titleName" aria-required="true" th:value="${bean.titleName}">
                                <label class="help-block m-b-none" for="titleName"
                                       id="titleName-error"><i class="far fa-bell"></i>必填项</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="titleShort" class="col-sm-2 col-form-label">短标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="titleShort" required="required"
                                       id="titleShort" aria-required="true" th:value="${bean.titleShort}">
                                <label class="help-block m-b-none" for="titleShort"
                                       id="titleShort-error"><i class="far fa-bell"></i>必填项</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="titleColor" class="col-sm-2 col-form-label">标题颜色</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="titleColor"
                                       id="titleColor" aria-required="true" th:value="${bean.titleColor}">
                                <label class="help-block m-b-none" for="titleColor"
                                       id="titleColor-error"><i class="far fa-bell"></i>选填项</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="cateId" class="col-sm-2 col-form-label">文章分类</label>
                            <div class="col-sm-10">
                                <select  class="form-control"   id="cateId" name="cateId"  required>
                                    <option   th:each="model : ${catelist}" th:value="${model.cateId}"
                                              th:selected="${model.cateId==bean.cateId}" th:text="${model.cateName}">文章</option>
                                </select>
                                <label class="help-block m-b-none" for="cateId"
                                       id="cateId-error"><i class="far fa-bell"></i>必填项</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="addPic" class="col-sm-2 col-form-label">置顶大图</label>
                            <div class="col-sm-10">
                                <button type="button" class="btn btn-primary btn-sm"
                                        id="addPic">上传图片</button>
                                <input type="text" class="form-control" id="filehidden"
                                       name="filehidden" style="display: none;"   th:value="${bean.widthPic}">

                                <div class="form-group row" style="margin-top: 1rem">
                                    <div class="filediv" style="display: none;">
                                        <input type="hidden"      />
                                        <img style="width: 400px; height: 200px;" />  <a href="javascript:;"
                                                                class="btn btn-danger btn-xs delfilediv"> 删除 </a>
                                    </div>
                                    <div class="filediv" th:style="'display:' + @{(${bean.widthPic!=null} ? 'inline-block' : 'none')} + ''" >
                                        <input type="hidden"   name="widthPic"  id="widthPic"  th:value="${bean.widthPic} "  />
                                        <img style="width: 400px; height: 100px;"
                                             th:src="${webPath}+${bean.widthPic}" />

                                        <a
                                            href="javascript:;" class="btn btn-danger btn-xs delfilediv">
                                        删除 </a>
                                    </div>
                                </div>
                                <label class="help-block m-b-none" for="filehidden"
                                       id="filehidden-error"><i class="far fa-bell"></i>必填项</label>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="addPic1" class="col-sm-2 col-form-label">高图</label>
                            <div class="col-sm-10">
                                <button type="button" class="btn btn-primary btn-sm"
                                        id="addPic1">上传图片</button>
                                <input type="text" class="form-control" id="filehidden1"
                                       name="filehidden1" style="display: none;">
                                <div class="form-group row" style="margin-top: 1rem">
                                    <div class="filediv1" style="display: none;">
                                        <img style="width: 400px; height: 400px;" /> <input
                                            type="hidden" /> <a href="javascript:;"
                                                                class="btn btn-danger btn-xs delfilediv"> 删除 </a>
                                    </div>
                                    <div class="filediv1" th:style="'display:' + @{(${bean.heightPic!=null} ? 'inline-block' : 'none')} + ''">
                                        <img style="width: 400px; height: 400px;"
                                             th:src="${webPath}+${bean.heightPic}" />
                                        <a
                                            href="javascript:;" class="btn btn-danger btn-xs delfilediv">
                                        删除 </a>
                                    </div>
                                </div>
                                <label class="help-block m-b-none" for="filehidden1"
                                       id="filehidden1-error"><i class="far fa-bell"></i>必填项</label>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="addPic2" class="col-sm-2 col-form-label">列表方图</label>
                            <div class="col-sm-10">
                                <button type="button" class="btn btn-primary btn-sm"
                                        id="addPic2">上传图片</button>
                                <input type="text" class="form-control" id="filehidden2"
                                       name="filehidden2" style="display: none;">
                                <div class="form-group row" style="margin-top: 1rem">
                                    <div class="filediv2" style="display: none;">
                                        <img style="width: 400px; height: 400px;" /> <input
                                            type="hidden" /> <a href="javascript:;"
                                                                class="btn btn-danger btn-xs delfilediv"> 删除 </a>
                                    </div>
                                    <div class="filediv2" th:style="'display:' + @{(${bean.squaretPic!=null} ? 'inline-block' : 'none')} + ''">
                                        <img style="width: 400px; height: 400px;"
                                             th:src="${webPath}+${bean.squaretPic}" />
                                        <a
                                            href="javascript:;" class="btn btn-danger btn-xs delfilediv">
                                        删除 </a>
                                    </div>
                                </div>
                                <label class="help-block m-b-none" for="filehidden2"
                                       id="filehidden2-error"><i class="far fa-bell"></i>必填项</label>
                            </div>

                        </div>

                        <div class="form-group row">
                            <label for="contentType" class="col-sm-2 col-form-label">文章类型</label>
                            <div class="col-sm-10">
                                <select  class="form-control"   id="contentType" name="contentType"  required>
                                    <option   th:selected="1==${bean.contentType}" value="1">文章</option>
                                    <option   th:selected="2==${bean.contentType}" value="2">链接</option>
                                </select>
                                <label class="help-block m-b-none" for="contentType"
                                       id="contentType-error"><i class="far fa-bell"></i>必填项</label>
                            </div>
                        </div>



                        <div class="form-group row">
                            <label for="contentUrl" class="col-sm-2 col-form-label">对外地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="contentUrl"
                                       id="contentUrl" aria-required="true" th:value="${bean.contentUrl}">
                                <label class="help-block m-b-none" for="contentUrl"
                                       id="contentUrl-error"><i class="far fa-bell"></i>选填项</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="contentAuthor" class="col-sm-2 col-form-label">作者</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="contentAuthor"
                                       id="contentAuthor" aria-required="true" th:value="${bean.contentAuthor}">
                                <label class="help-block m-b-none" for="contentAuthor"
                                       id="contentAuthor-error"><i class="far fa-bell"></i>选填项</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="contentOrigin" class="col-sm-2 col-form-label">来源</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="contentOrigin"
                                       id="contentOrigin" aria-required="true" th:value="${bean.contentOrigin}">
                                <label class="help-block m-b-none" for="contentOrigin"
                                       id="contentOrigin-error"><i class="far fa-bell"></i>选填项</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="originUrl" class="col-sm-2 col-form-label">来源地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="originUrl"
                                       id="originUrl" aria-required="true" th:value="${bean.originUrl}">
                                <label class="help-block m-b-none" for="originUrl"
                                       id="originUrl-error"><i class="far fa-bell"></i>选填项</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contentTime" class="col-sm-2 col-form-label">新闻时间</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="contentTime"
                                       id="contentTime" aria-required="true" th:value="${bean.contentTime}">
                                <label class="help-block m-b-none" for="contentTime"
                                       id="contentTime-error"><i class="far fa-bell"></i>必填项</label>
                            </div>
                        </div>





                        <div class="form-group row">
                            <label for="contentDesc" class="col-sm-2 col-form-label">内容描述</label>
                            <div class="col-sm-10">
                                <textarea type="text" class="form-control" name="contentDesc"
                                          id="contentDesc" aria-required="true" th:text="${bean.contentDesc}">
                                </textarea>
                                <label class="help-block m-b-none" for="contentDesc"
                                       id="contentDesc-error"><i class="far fa-bell"></i>选填项</label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contentText" class="col-sm-2 col-form-label">内容</label>
                            <div class="col-sm-10">
                                <textarea   type="text" class="textarea" name="contentText"
                                          id="contentText" aria-required="true" th:text="${bean.contentText}">
                                </textarea>
                                <label class="help-block m-b-none" for="contentText"
                                       id="contentText-error"><i class="far fa-bell"></i>必填项</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="contentLink" class="col-sm-2 col-form-label">对外链接</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="contentLink"
                                       id="contentLink" aria-required="true" th:value="${bean.contentLink}">
                                <label class="help-block m-b-none" for="contentLink"
                                       id="contentLink-error"><i class="far fa-bell"></i>必填项</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="isSlider" class="col-sm-2 col-form-label">是否轮播</label>
                            <div class="col-sm-10">
                                <input type="checkbox" class="js-switch" id="state"  th:checked="${bean.isSlider}==1"  />
                                <input type="hidden" id="isSlider" name="isSlider" th:value="${bean.isSlider}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="isRecommend" class="col-sm-2 col-form-label">是否置顶</label>
                            <div class="col-sm-10">
                                <input type="checkbox" class="js-switch" id="state1"  th:checked="${bean.isRecommend}==1"  />
                                <input type="hidden" id="isRecommend" name="isRecommend" th:value="${bean.isRecommend}">
                            </div>
                        </div>
                    </div>
                </div>


            </form>
            <!-- /.card-body -->
            <div class="card-footer">
                <button type="button" class="btn btn-info" onclick="validaBef();">保存</button>
                <button type="button" class="btn btn-default float-right" id="back">取消</button>
            </div>
            <!-- /.card-footer -->


    </section>
    </div>

</div>
<!-- ./wrapper -->
<div th:include="include/foot"></div>

<script>
    var issubmit=false;
    function dosubmit(){
        if(issubmit==false){
            issubmit=true;
            return true;
        }else{
            return false;
        }
    }
    $('.textarea').summernote({
        lang : 'zh-CN',
        minHeight : 300,
        callbacks: {
            // onImageUpload callback
            onImageUpload: function(files) {
                // upload image to server and create imgNode...
                uploadImage(files);
// 						                   var formData = new FormData();
// 						                	for (var i = 0; i < files.length; i++) {
// 						               　　		  		 formData.append("file", files[i]);
// 						                   }
// 						                	 $.ajax({
// 							                        data : formData,
// 							                        type : "POST",
// 							                        url :[[${#httpServletRequest.contextPath}]]+'/common/upload', //图片上传出来的url，返回的是图片上传后的路径，http格式
// //							                        cache : false,
// 							                        contentType : false,
// 							                        processData : false,
// 							                        success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
// //							                            console.log(data);
// 							                        if (data.res) {
// 														let imglist=data.url;
// 														for (var i = 0; i < imglist.length; i++) {
// 															 $('.textarea').summernote('insertImage',  imglist[i],'img');
// 														}
// 													}

// 							                        },
// 							                        error:function(){
// 							                            alert("上传失败");
// 							                        }
// 							                    });

            }
        }
    });
    function uploadImage(files){
        for (var i = 0; i < files.length; i++) {
            let data = new FormData();
            data.append("file", files[i]);
            (function (i) {
                setTimeout(function () {
                    $.ajax({
                        data : data,
                        type : "POST",
                        url :'[[${webPath}]]'+'/common/uploads', //图片上传出来的url，返回的是图片上传后的路径，http格式
// 		 							                        cache : false,
                        contentType : false,
                        processData : false,
                        success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
// 		 							                            console.log(data);
                            $('.textarea').summernote('insertImage',  data.url,'img');
                        },
                        error:function(){
                            alert("上传失败");
                        }
                    });
                }, 1000 * i);
            })(i);





        }
    }
    $(document).on("click",".del",function() {
        $(this).parent().parent().remove();

    });
    $(document).on("click",".delfilediv",function() {
        $(this).parent().remove();

    });
    $("#addex").click(function(){
        let  id=$('#id').val();
        console.log(id)
        // return;
        layer.open({
            type: 2,
//		        closeBtn:0,
            title: false,
            area: ['50%', '95%'],
            content: 'select_experts?id='+id,
        });
    });
    $("#addPic").click(function(){
        $("#file").click();
    });
    $("#addPic1").click(function(){
        $("#file1").click();
    });
    $("#addPic2").click(function(){
        $("#file2").click();
    });
    $("#back").click(function() {
        location.href = 'list';
    });
    $("#file").change(function(e){
        if($(this).val()!=''){
            $("#fileupload").ajaxSubmit({
                success:function(e){
                    console.log(e);
                    if(e.res){
                        $('.filediv').each(function(i,e){
                            if(i>0){
                                $(e).remove();
                            }
                        });
                        let filediv= $(".filediv:eq(0)");
                        let filedivclone=filediv.clone(true);
                        filedivclone.find('img').attr('src',"[[${webPath}]]"+e.url);
                        filedivclone.find('input').attr('name','widthPic');
                        filedivclone.find('input').attr('id','widthPic');
                        filedivclone.find('input').attr('value',e.url);
                        filedivclone.show();
                        filedivclone.appendTo(filediv.parent());
                        $("#file").val("")
                    }

                },error:function(e){
                    layer.msg(e.responseText, {icon: 5});
                }
            });
        }

    });
    $("#file1").change(function(e){
        if($(this).val()!=''){
            $("#fileupload").ajaxSubmit({
                success:function(e){
                    console.log(e);
                    if(e.res){
                        $('.filediv1').each(function(i,e){
                            if(i>0){
                                $(e).remove();
                            }
                        });
                        let filediv= $(".filediv1:eq(0)");
                        let filedivclone=filediv.clone(true);
                        filedivclone.find('img').attr('src',"[[${webPath}]]"+e.url);
                        filedivclone.find('input').attr('name','heightPic');
                        filedivclone.find('input').attr('value',e.url);
                        filedivclone.show();
                        filedivclone.appendTo(filediv.parent());
                        $("#file1").val("")
                    }

                },error:function(e){
                    layer.msg(e.responseText, {icon: 5});
                }
            });
        }

    });
    $("#file2").change(function(e){
        if($(this).val()!=''){
            $("#fileupload").ajaxSubmit({
                success:function(e){
                    console.log(e);
                    if(e.res){
                        $('.filediv2').each(function(i,e){
                            if(i>0){
                                $(e).remove();
                            }
                        });
                        let filediv= $(".filediv2:eq(0)");
                        let filedivclone=filediv.clone(true);
                        filedivclone.find('img').attr('src',"[[${webPath}]]"+e.url);
                        filedivclone.find('input').attr('name','squaretPic');
                        filedivclone.find('input').attr('value',e.url);
                        filedivclone.show();
                        filedivclone.appendTo(filediv.parent());
                        $("#file2").val("")
                    }

                },error:function(e){
                    layer.msg(e.responseText, {icon: 5});
                }
            });
        }

    });
    // 	var elem = document.querySelector('.js-switch');
    // 	var switchery = new Switchery(elem, { color: '#1AB394' });
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function(html) {
        var switchery = new Switchery(html, { color: '#1AB394' });
    });

    $.validator.setDefaults({
        ignore: "",
        highlight : function(a) {
            $(a).removeClass("is-valid").addClass("is-invalid");
        },
        success : function(a) {
            $(a).prev().removeClass("is-invalid").addClass("is-valid");
            $(a).html('<i class="fas fa-check"></i>验证成功');
        },
        errorClass : "help-block m-b-none",
// 			validClass : "help-block m-b-none",
        errorPlacement : function(a, b) {
            if (b.is(":radio") || b.is(":checkbox")) {
                a.appendTo(b.parent().parent().parent())
            } else {
                a.appendTo(b.parent())
            }
        },
        submitHandler:function(form){

            form.submit();
        }
    });
    $.validator.addMethod("checkFile",function(value,element){
      let isSlider=    $("#isSlider").val();
      console.log(isSlider)
        let files=$("input[name='fileurls']");
        if(files.length==0){
            return true;
        }
        return false;
    },"");
    $.validator.addMethod("checkCode", function(value, element) {
        console.log(value)
        if (value == '') {
            return true;
        }
        let result = false;
        let id = $("#baseId").val();
        $.ajax({
            url : 'checkCode?id=' + id + '&code=' + value+ '&type=' + 1,
            async : false,
            success : function(e) {
                result = e.res;
            },error:function(e){
                layer.msg(e.responseText, {icon: 5});
            }
        });
        return result;
    }, "");
    $.validator.addMethod("checkName", function(value, element) {
        console.log(value)
        if (value == '') {
            return true;
        }
        let result = false;
        let id = $("#baseId").val();
        $.ajax({
            url : 'checkCode?id=' + id + '&code=' + value+ '&type=' + 2,
            async : false,
            success : function(e) {
                result = e.res;
            },error:function(e){
                layer.msg(e.responseText, {icon: 5});
            }
        });
        return result;
    }, "");
    $.validator.addMethod("mobile", function(value, element) {
        var myreg=/^[1][3,4,5,6.7,8,9][0-9]{9}$/;
        var length = value.length;
        return this.optional(element) || (length == 11 && myreg.test(value));
    }, "手机号码格式错误!");
    $("#form").validate(
        {
            ignore : "",
            rules : {
                doctorPhone: {
                    required:true,
                    mobile:true
                },
                widthPic:{
                    checkFile : {
                        required:true
                    },
                },

                baseName : {
                    required:true,
                    checkName : true
                },
                titleShort : {
                    required:true,
                    maxlength:20
                },
                filehidden:{
                    required:true,
                    checkFile:true
                },
                attrs : {
                    required:true
                },

            },
            messages : {
                widthPic:{
                    checkFile : {
                        required:'<i class="far fa-times-circle"></i>用户名已经使用'
                    },
                },
                baseName : {
                    required : '<i class="far fa-times-circle"></i>请输入基地名称',
                    checkName : '<i class="far fa-times-circle"></i>基地名称已存在'
                },
                titleShort : {
                    required : '<i class="far fa-times-circle"></i>请输入排序',
                    maxlength : '代码最大长度为{0}'
                },
                goodsName : '<i class="far fa-times-circle"></i>请输入商品名称',
                filehidden : '<i class="far fa-times-circle"></i>请上传图片',
                attrs : '<i class="far fa-times-circle"></i>请选择关联专家',
            }
        });
    function validaBef(){


        if($("#state").prop("checked")){
            $("#isSlider").val("1");
        }else{
            $("#isSlider").val("0");
        }
        if($("#state1").prop("checked")){
            $("#isRecommend").val("1");
        }else{
            $("#isRecommend").val("0");
        }
        let code=$('.textarea').summernote('code');
        $(".textarea").val(code);
        $("#checkItems").val($('.specsItem:checked').map(function(){return this.value}).get().join(','));
        console.log( $("#isSlider").val(),'55555555555555555555555555555')
        if ( $("#isSlider").val()==1){
            let file=$("input[name='widthPic']").map(function(){return this.value}).get().join(',');
            $("#filehidden").attr('value',file);
        }else {
            $("#filehidden").attr('value',0);
        }



        if ($("input[name='eId']").length>0){
            $("#attrs").attr('value',$("input[name='eId']").length);
        }


        if($("#form").validate()){
            if(dosubmit()){
                $("#form").submit();
            }
            setTimeout(function () {
                issubmit=false
            }, 3000);
        }

    }
    $(document).ready(function (){
        $("#hospitalId").change(function (){
            let v=$(this).val();
            let t= $(this).find("option:selected").text();
            if(v>0){
                $("#hospitalName").val(t);
            }
            $.ajax({url:'../doctor/departmentList',data:"hospitalId="+v,success:function (data){
                    if(data.res){
                        $("#departmentId").empty();
                        $("#departmentId").append("<option value='-1'>请选择科室</option>");
                        for(let i=0;i<data.list.length;i++){
                            console.log(data.list[i])
                            $("#departmentId").append("<option value='"+data.list[i].id+"'>"+data.list[i].departmentName+"</option>");
                        }

                    }
                }})
        });
        $("#departmentId").change(function (){
            let v=$(this).val();
            let t= $(this).find("option:selected").text();
            console.log(v,t)
            if(v>0){
                $("#departmentName").val(t);
            }

        });
        $("#doctorTitlesId").change(function (){
            let v=$(this).val();
            let t= $(this).find("option:selected").text();
            if(v>0){
                $("#doctorTitlesName").val(t);
            }
        });
        $("#detailAddress").click(function (){
            $("#mapDiv").show();
        });
    });

    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        let loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            $("#detailAddress").val(loc.poiaddress+loc.poiname);
            $("#longitude").val(loc.latlng.lng);
            $("#latitude").val(loc.latlng.lat);
            $("#fullAddr").val(loc.poiaddress);
            $("#mapDiv").hide();
        }
    }, false);
</script>
</body>
</html>